<template>
 <div class="address" v-show="showFlag">
  <div class="addressboxbg" @click="cancel"></div>
  <div class="addressbox">
   <p class="text_btn"><span style="float:left;" @click="cancel">取消</span><span style="color:#222;position:absolute;left:50%;transform:translateX(-50%);">请选择地址</span><span style="float:right;color:#2AB32F;" @click="complete">完成</span></p>
   <div class="addressSelect" >
    <div class="selectbox"></div>
    <ul ref="idealist" id="provinceList"   @touchstart="touchStart($event,'province')" @touchmove="touchMove($event,'province')" @touchend="touchEnd($event,'province')" :style="provinceStyle" :class="[{'selectAni':addSelect}]">
     <li v-for="(item,index) in list" :class="[{'addSelectActive':index == provinceIndex}]" :id="item.provinceid" :key="index">{{item.province}}</li>
    </ul>
    <ul id="cityList" @touchstart="touchStart($event,'city')" @touchmove="touchMove($event,'city')" @touchend="touchEnd($event,'city')" :style="cityStyle" :class="[{'selectAni':addSelect}]">
     <li v-for="(item,index) in list2" :class="[{'addSelectActive':index == cityIndex}]" :key="index">{{item.city}}</li>
    </ul>
    <!--<ul @touchstart="touchStart($event,'district')" @touchmove="touchMove($event,'district')" @touchend="touchEnd($event,'district')" :style="districtStyle" :class="[{'selectAni':addSelect}]">
     <li v-for="(item,index) in list3" :class="[{'addSelectActive':index == districtIndex}]" :key="index" >{{item.area}}</li>
    </ul> -->
   </div>
  </div>
 </div>
</template>
  
<script>
import { memberCity} from '@/api/index'

export default {
  props:{
    showFlag:{
      type:Boolean,
      default:false
    },
    cityNo:{
      type:String,
      default:''
    },
  },
 data () {
  return {
   list: [],
   list2: [],
   list3: [],
   provinceStyle: {
    WebkitTransform: 'translate3d(0px,0px,0px)'
   },
   cityStyle: {
    WebkitTransform: 'translate3d(0px,0px,0px)'
   },
   districtStyle: {
    WebkitTransform: 'translate3d(0px,0px,0px)'
   },
   startTop: 0,
   provinceIndex: 0,
   cityIndex: 0,
   districtIndex: 0,
   translateY: 0,
   maxScroll: 0,
   addHeight: 0,
   addSelect: false,
   provinceVal: '',
   cityVal: '',
   areaVal: '',
   val: {
    'provinceVal': '',
    'cityVal': '',
    'areaVal': ''
   }
  }
 },
 watch: {
  // 监听省滑动
  provinceVal (value) {
      this.getCitys1(value.provinceid);
  //  this.$axiosGet(this.$api.area, {parentId: value}).then((res) => {
  //   if (res.code === 1) {
  //    this.list2 = res.data.length > 1 ? res.data : [{name: '-'}]
  //    if (res.data.length < 1) {
  //     this.list3 = [{name: '-'}]
  //    }
  //    this.cityVal = this.list2[0].value
  //   }
  //  })
  },
  // 监听市滑动
  cityVal (value) {
   if (value) {
    //  this.getCitys2(value);
    // this.$axiosGet(this.$api.area, {parentId: value}).then((res) => {
    //  if (res.code === 1) {
    //   this.list3 = res.data.length > 1 ? res.data : [{name: '-'}]
    //  }
    // })
   }
  }
 },
 mounted() {
    let this_ = this;
    document.getElementById("provinceList").addEventListener('touchstart', function (e) {
       this_.touchStart(e,'province')
    }, {passive: false}); //passive 参数不能省略，用来兼容ios和android
    document.getElementById("provinceList").addEventListener('touchmove', function (e) {
       this_.touchMove(e,"province")
    }, {passive: false}); //passive 参数不能省略，用来兼容ios和android
    document.getElementById("provinceList").addEventListener('touchend', function (e) {
       this_.touchEnd(e,"province")
    }, {passive: false}); //passive 参数不能省略，用来兼容ios和android
   

   document.getElementById("cityList").addEventListener('touchstart', function (e) {
       this_.touchStart(e,'city')
    }, {passive: false}); //passive 参数不能省略，用来兼容ios和android
    document.getElementById("cityList").addEventListener('touchmove', function (e) {
       this_.touchMove(e,"city")
    }, {passive: false}); //passive 参数不能省略，用来兼容ios和android
    document.getElementById("cityList").addEventListener('touchend', function (e) {
       this_.touchEnd(e,"city")
    }, {passive: false}); //passive 参数不能省略，用来兼容ios和android
   
  },
 created () {
  // 初始化数据
  // 拿省的数据
  let cityid = "000000";
  if(this.cityNo != 0){
    cityid = this.cityNo.length>=2?this.cityNo.split(",")[0]:'000000';
  }
  this.getCitys();
  this.getCitys1(cityid);
  this.val.areaVal = {
   'name': '',
   'value': ''
  }
  // 第一条数据为直辖市 so '-' 符号表示为第三列
  this.list3 = [{name: '-'}]
 },
 methods: {
    getCitys(cityNo){
        let para = {
            "cityNo" :cityNo,                //类型：String  必有字段  备注：位置编码
        }
        memberCity(para).then((res)=>{
            if(res.data.code == '000'){
                this.list = res.data.content;
                
                  this.val.provinceVal = this.list[0];
                  if(this.cityNo.length>=1){
                    this.list.map((item,index)=>{
                      if(item.provinceid == this.cityNo.split(",")[0]){
                        this.$set(this.provinceStyle,"WebkitTransform",'translate3d(0px,' + -(index * 34) + 'px,0px)');
                        this.provinceIndex=index;
                        this.$emit('provice', item.province)
                      }
                    })
                  }
                
            }else{
                this.$vux.toast.show({
                text: '网络异常，稍后重试'
                })
            }
        }).catch((err)=>{
            // alert(err);
        });
    },
    getCitys1(cityNo){
        let para = {
            "cityNo" :cityNo,                //类型：String  必有字段  备注：位置编码
        }
        memberCity(para).then((res)=>{
            if(res.data.code == '000'){
                this.list2 = res.data.content;
                this.$set(this.val,"cityVal",this.list2[0])
                if(this.cityNo.length>=2){
                  this.list2.map((item,index)=>{
                    if(item.cityid == this.cityNo.split(",")[1]){
                      this.$set(this.cityStyle,"WebkitTransform",'translate3d(0px,' + -(index * 34) + 'px,0px)');
                      this.cityIndex=index;
                      this.$emit('city', item.city);
                    }
                  })
                }
            }else{
                this.$vux.toast.show({
                text: '网络异常，稍后重试'
                })
            }
        }).catch((err)=>{
            // alert(err);
        });
    },
     getCitys2(cityNo){
        let para = {
            "cityNo" :cityNo,                //类型：String  必有字段  备注：位置编码
        }
        memberCity(para).then((res)=>{
            if(res.data.code == '000'){
                this.list3 = res.data.content;
                this.val.areaVal = this.list3[0]
            }else{
                this.$vux.toast.show({
                text: '网络异常，稍后重试'
                })
            }
        }).catch((err)=>{
            // alert(err);
        });
    },
  // 点击取消
  cancel () {
   this.$emit('cancel', false)
  },
  // 点击完成
  complete () {
   if (!this.val.areaVal.cityid) {
    this.val.areaVal = {
     'name': '',
     'value': ''
    }
   }
   if(!this.val.cityVal){
     this.val.cityVal = {
     'name': '',
     'value': ''
    }
   }else{
    if (!this.val.cityVal.cityid) {
      this.val.cityVal = {
      'name': '',
      'value': ''
      }
    }
  }
  //  console.log(this.val,"this.val",this.provinceVal,this.cityVal)
   this.$emit('complete', this.val)
  },
  // 滑动开始
  touchStart (e, val) {
   e.preventDefault()
   this.addSelect = false
   this.addHeight = e.currentTarget.children[0].offsetHeight
   this.maxScroll = this.addHeight * e.currentTarget.children.length
   
   this.startTop = e.targetTouches[0].pageY
   switch (val) {
    case 'province':
     this.translateY = parseInt(this.provinceStyle.WebkitTransform.slice(this.provinceStyle.WebkitTransform.indexOf(',') + 1, this.provinceStyle.WebkitTransform.lastIndexOf(',')))
     break
    case 'city':
     this.translateY = parseInt(this.cityStyle.WebkitTransform.slice(this.cityStyle.WebkitTransform.indexOf(',') + 1, this.cityStyle.WebkitTransform.lastIndexOf(',')))
     break
    case 'district':
     this.translateY = parseInt(this.districtStyle.WebkitTransform.slice(this.districtStyle.WebkitTransform.indexOf(',') + 1, this.districtStyle.WebkitTransform.lastIndexOf(',')))
     break
    default:
     break
   }
  },
  // 滑动进行中
  touchMove (e, val) {
   e.preventDefault()
   switch (val) {
    case 'province':
     if ((e.targetTouches[0].pageY - this.startTop + this.translateY) > 0) {
      this.provinceStyle.WebkitTransform = 'translate3d(0px,0px,0px)'
     } else if ((e.targetTouches[0].pageY - this.startTop + this.translateY) < -(this.maxScroll - this.addHeight)) { 
      this.provinceStyle.WebkitTransform = 'translate3d(0px,' + -(this.maxScroll - this.addHeight) + 'px,0px)'
     } else {
      this.provinceStyle.WebkitTransform = 'translate3d(0px,' + (e.targetTouches[0].pageY - this.startTop + this.translateY) + 'px,0px)'
     }
     break
    case 'city':
     if ((e.targetTouches[0].pageY - this.startTop + this.translateY) > 0) {
      this.cityStyle.WebkitTransform = 'translate3d(0px,0px,0px)'
     } else if ((e.targetTouches[0].pageY - this.startTop + this.translateY) < -(this.maxScroll - this.addHeight)) {
      this.cityStyle.WebkitTransform = 'translate3d(0px,' + -(this.maxScroll - this.addHeight) + 'px,0px)'
     } else {
      this.cityStyle.WebkitTransform = 'translate3d(0px,' + (e.targetTouches[0].pageY - this.startTop + this.translateY) + 'px,0px)'
     }
     break
    case 'district':
     if ((e.targetTouches[0].pageY - this.startTop + this.translateY) > 0) {
      this.districtStyle.WebkitTransform = 'translate3d(0px,0px,0px)'
     } else if ((e.targetTouches[0].pageY - this.startTop + this.translateY) < -(this.maxScroll - this.addHeight)) {
      this.districtStyle.WebkitTransform = 'translate3d(0px,' + -(this.maxScroll - this.addHeight) + 'px,0px)'
     } else {
      this.districtStyle.WebkitTransform = 'translate3d(0px,' + (e.targetTouches[0].pageY - this.startTop + this.translateY) + 'px,0px)'
     }
     break
    default:
     break
   }
  },
  // 滑动结束
  touchEnd (e, val) {
   e.preventDefault()
   this.addSelect = true
   switch (val) {
    case 'province':
     // eslint-disable-next-line no-case-declarations
     let provinceTranslateY = parseInt(this.provinceStyle.WebkitTransform.slice(this.provinceStyle.WebkitTransform.indexOf(',') + 1, this.provinceStyle.WebkitTransform.lastIndexOf(',')))
     this.provinceIndex = -Math.round(provinceTranslateY / this.addHeight)
     this.provinceStyle.WebkitTransform = 'translate3d(0px,' + (Math.round(provinceTranslateY / this.addHeight) * this.addHeight) + 'px,0px)'
     this.cityStyle.WebkitTransform = this.districtStyle.WebkitTransform = 'translate3d(0px,0px,0px)'
     this.cityIndex = this.districtIndex = 0
     break
    case 'city':     // eslint-disable-next-line no-case-declarations
     let cityTranslateY = parseInt(this.cityStyle.WebkitTransform.slice(this.cityStyle.WebkitTransform.indexOf(',') + 1, this.cityStyle.WebkitTransform.lastIndexOf(',')))
     this.cityIndex = -Math.round(cityTranslateY / this.addHeight)
     this.cityStyle.WebkitTransform = 'translate3d(0px,' + (Math.round(cityTranslateY / this.addHeight) * this.addHeight) + 'px,0px)'
     this.districtStyle.WebkitTransform = 'translate3d(0px,0px,0px)'
     this.districtIndex = 0
     break
    // case 'district':
    //  let districtTranslateY = parseInt(this.districtStyle.WebkitTransform.slice(this.districtStyle.WebkitTransform.indexOf(',') + 1, this.districtStyle.WebkitTransform.lastIndexOf(',')))
    //  this.districtIndex = -Math.round(districtTranslateY / this.addHeight)
    //  this.districtStyle.WebkitTransform = 'translate3d(0px,' + (Math.round(districtTranslateY / this.addHeight) * this.addHeight) + 'px,0px)'
    //  break
    default:
     break
   }
   // 滑动结束后 处理数据
   this.dataProcessing()
  },
  // 数据处理
  dataProcessing () {
   // 滑动数据传输 数据处理
   this.val.provinceVal = this.list[this.provinceIndex]
   this.provinceVal = this.list[this.provinceIndex]
   this.val.cityVal = this.list2[this.cityIndex]
   this.cityVal = this.list2[this.cityIndex]
  //  this.val.areaVal = this.list3[this.districtIndex]
  //  this.areaVal = this.list3[this.districtIndex].value
   // this.val.cityVal = this.addressData[this.provinceIndex].city[this.cityIndex].name
   // this.val.areaVal = this.addressData[this.provinceIndex].city[this.cityIndex].area[this.districtIndex]
   // this.$emit('getAddress', this.val)
   // this.test([this.val.provinceVal, this.cityIndex, this.districtIndex])
  }
 }
}
</script>
  
<style>
ul,li{ padding:0;margin:0;list-style:none;}
.address{
 position:absolute;
 top: 0px;
 bottom: 0px;
 left: 0px;
 right: 0px;
}
.address .addressbox{
 height: 40%;
 position: absolute;
 z-index: 101;
 width: 100%;
 max-height: 100%;
 overflow: hidden;
 background: #fff;
 bottom: 0px;
}
.address .addressbox .text_btn{
 height: 44px;
 font-size: 16px;
 line-height: 44px;
 border-top: 1px solid #ccc;
 padding: 0 10px;
 background: #fbf9fe;
 color:#2AB32F;
}
.addressSelect .selectbox{
 width: 100%;
 height: 34px;
 margin-top: 60px;
 background-image: linear-gradient(to bottom, #d0d0d0, #d0d0d0, transparent, transparent), linear-gradient(to top, #d0d0d0, #d0d0d0, transparent, transparent);
 background-size:100% 1px;
 background-position:top, bottom;
 background-repeat:no-repeat;
}
.address .addressboxbg{
 position: absolute;
 left: 0;
 top: 0;
 z-index: 100;
 width: 100%;
 height: 100%;
 background: rgba(0,0,0,.7);
}
.addressSelect{width: 100%; position: relative; background: #fff; height: 190px;overflow: hidden; -webkit-mask-box-image: linear-gradient(0deg,transparent,transparent 5%,#fff 20%,#fff 80%,transparent 95%,transparent); font-size: 14px;}
.addressSelect ul{width: 50%; position: absolute; left: 0; top:60px; -webkit-transform-style: preserve-3d; -webkit-backface-visibility:hidden; text-align: center; padding-left: 0;}
.addressSelect ul li{
  float:left;
  width:100%; white-space : nowrap;overflow: hidden; text-overflow:ellipsis; color:rgba(0,0,0,.54); height:34px;line-height:34px;
  }
.addressSelect ul:nth-of-type(2){left: 50%;}
.addressSelect ul:nth-of-type(3){left: 66.666666%;}
.addressSelect ul li.addSelectActive{color:rgba(0,0,0,.87); transform: scale(1.1); transition: 0.5s;}
.selectAni{transition: 0.8s;}

</style>